//生产管理系统/报警管理

import React, { Component } from "react";
import { connect } from "dva";
import {
    Card,
    DatePicker,
    Button,
    Pagination,
    Input,
    Icon,
    Table,
    Select,
    Menu,
    Dropdown,
    message
} from "antd";

import style from "./HistoricalAlarm.less";

//引入字体图标组件
import MyIcon from "../../../components/common/MyIcon";
import moment from "moment";
import { AlarHistorypages } from "../../../services/redmoe";
import request from "../../../utils/request";
import PublicService from "../../../services/PublicService";
const Option = Select.Option;

//日期选择器套件
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

function onChange(date, dateString) {
    console.log(date, dateString);
}



class HistoricalAlarm extends Component {
    state = {
        rank: "",
        startTime: null,
        endTime: null,
        RangePicker: null,
        tableLoading: false,
        value: "",
        startValue: moment(),
        endValue: moment().subtract("days", 30),
        page: 1,
        rows: 10,
        rowCount: 0,
        dataSource: [],
        sel: "全部",
        columns: [
            {
                title: "序号",
                dataIndex: "num",
                key: "num",
                align: "center"
            },
            {
                title: "报警设备/点位名称",
                dataIndex: "site",
                key: "site",
                align: "center"
            },
            {
                title: "报警时间",
                dataIndex: "createTime",
                key: "createTime",
                align: "center"
            },
            {
                title: "报警级别",
                dataIndex: "rank",
                key: "rank",
                align: "center"
            },
            {
                title: "报警信息",
                dataIndex: "monitorName",
                key: "monitorName",
                align: "center"
            },
            {
                title: "操作",
                dataIndex: "caozuo",
                key: "caozuo",
                align: "center",
                render: (text, record, index) => (
                    <span onClick={this.details.bind(this, record)}>
                        <MyIcon
                            type="icon-chakan1"
                            className={style.MyIcon_chakan1}
                            style={{ color: "#31E0A0" }}
                        />{" "}
                    </span>
                )
            }
        ]
    };
    //详情
    details = record => {
        console.log(record);
        if (record.particulars == 1) {
            message.warning("此处故障暂无详情!");
            return;
        }
        this.props.history.push("/controlSubject/AlarmManagement/DetailsAlarm");
        PublicService.setCookie("DetailsId", record.id);
    };
    //重置
    reset = () => {
        this.setState({
            RangePicker: null,
            rank: "",
            startTime: null,
            endTime: null,
            startValue: null,
            endValue: null,
            value: "",
            page: 1
        });
        let data = {
            endTime: "",
            page: 1,
            rank: "",
            rows: 10,
            site: "",
            startTime: ""
        };

        AlarHistorypages({ ...data }).then(data => {
            console.log(data);
            if (data.data.rc == 0) {
                data.data.ret.xinxishuju.items.forEach(item => {
                    item.createTime = moment(item.createTime).format(
                        "YYYY-MM-DD HH:mm:ss"
                    );
                });
                this.setState({
                    dataSource: data.data.ret.xinxishuju.items,
                    rowCount: data.data.ret.xinxishuju.rowCount,
                    tableLoading: false
                });
            }
        });
    };
    //日期选择事件
    RangePicker = (data, datastring) => {
        this.setState({
            startTime: `${datastring[0]}`,
            endTime: `${datastring[1]}`,
            RangePicker: [data[0], data[1]]
        });

        setTimeout(() => {
            console.log(this.state.endTime);
        });
    };
    //分页器
    onShowSizeChange = (page, rows) => {
        this.setState({
            page: page,
            rows: rows
        });
        setTimeout(() => {
            this.query();
        });
    };
    Pagination = (page, pageSize) => {
        this.setState({
            page,
            pageSize
        });

        setTimeout(() => {
            this.setState({
                tableLoading: true
            });
            setTimeout(() => {
                let data = {
                    endTime: this.state.endTime,
                    page: this.state.page,
                    rank: this.state.rank,
                    rows: this.state.rows,
                    site: this.state.value,
                    startTime: this.state.startTime
                };

                AlarHistorypages({ ...data }).then(data => {
                    console.log(data);
                    if (data.data.rc == 0) {
                        data.data.ret.xinxishuju.items.forEach(item => {
                            item.createTime = moment(item.createTime).format(
                                "YYYY-MM-DD HH:mm:ss"
                            );
                        });
                        this.setState({
                            dataSource: data.data.ret.xinxishuju.items,
                            rowCount: data.data.ret.xinxishuju.rowCount,
                            tableLoading: false
                        });
                    }
                });
            }, 100);
        });
    };
    //页面进入渲染周期
    componentDidMount() {
        let data = {
            endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
            page: 1,
            rank: "",
            rows: 10,
            site: "",
            startTime: moment()
                .subtract("days", 30)
                .format("YYYY-MM-DD HH:mm:ss")
        };
        //页面进入事件
        AlarHistorypages({ ...data }).then(data => {
            console.log(data);
            if (data.data.rc == 0) {
                data.data.ret.xinxishuju.items.forEach(item => {
                    item.createTime = moment(item.createTime).format(
                        "YYYY-MM-DD HH:mm:ss"
                    );
                });
                this.setState({
                    dataSource: data.data.ret.xinxishuju.items,
                    rowCount: data.data.ret.xinxishuju.rowCount
                });
            }
        });
    }
    //查询按钮事件
    query = () => {
        if (this.state.startTime == null || this.state.endTime == null) {
            message.warning("请将时间选取完整!");
            return;
        }
        this.setState({
            tableLoading: true,

            dataSource: []
        });
        setTimeout(() => {
            let data = {
                endTime: this.state.endTime,
                page: this.state.page,
                rank: this.state.rank,
                rows: this.state.rows,
                site: this.state.value,
                startTime: this.state.startTime
            };

            AlarHistorypages({ ...data }).then(data => {
                console.log(data);
                if (data.data.rc == 0) {
                    data.data.ret.xinxishuju.items.forEach(item => {
                        item.createTime = moment(item.createTime).format(
                            "YYYY-MM-DD HH:mm:ss"
                        );
                    });
                    this.setState({
                        dataSource: data.data.ret.xinxishuju.items,
                        rowCount: data.data.ret.xinxishuju.rowCount,
                        tableLoading: false,
                        page: 1
                    });
                }
            });
        }, 300);
    };
    //关键词
    InputChange = e => {
        this.setState({
            value: e.target.value
        });
        setTimeout(() => {
            console.log(this.state.value);
        });
    };

    //下拉选择器事件
    handleChange = value => {
        console.log(value);
        this.setState({
            rank: value,
            sle: value
        });
    };
    //导出
    derive = e => {
        if (e.key == "item_0") {
            //导出本页
            let endDate = `${moment(new Date()).format("YYYY-MM-DD")} 23:59:00`;
            let startDate = `${moment(new Date()).format(
                "YYYY-MM-DD"
            )} 00:00:00`;
            window.location.href = `hh-management-web/gnhj/alarm/historicalAlarmExcelExport?page=${
                this.state.page
            }&rows=${this.state.rows}&isAll=${true}&endTime=${
                this.state.endTime
            }&startTime=${this.state.startTime}&rank=${this.state.rank}&site=${
                this.state.value
            }`;
        }
        if (e.key == "item_1") {
            //导出全部
            let endDate = `${moment(new Date()).format("YYYY-MM-DD")} 23:59:00`;
            let startDate = `${moment(new Date()).format(
                "YYYY-MM-DD"
            )} 00:00:00`;
            window.location.href = `hh-management-web/gnhj/alarm/historicalAlarmExcelExport?page=${
                this.state.page
            }&rows=${this.state.rows}&isAll=${false}&endTime=${
                this.state.endTime
            }&startTime=${this.state.startTime}&rank=${this.state.rank}&site=${
                this.state.value
            }`;
        }
    };

    //日期选择器
    disabledStartDate = startValue => {
        const endValue = this.state.endValue;
        if (!startValue || !endValue) {
            return false;
        }
        return startValue.valueOf() > endValue.valueOf();
    };

    disabledEndDate = endValue => {
        const startValue = this.state.startValue;
        if (!endValue || !startValue) {
            return false;
        }

        let one = startValue.valueOf() + 31 * 24 * 60 * 60 * 1000;

        return (
            endValue.valueOf() <= startValue.valueOf() ||
            endValue.valueOf() >= one
        );
        // return endValue.valueOf() > startValue.valueOf() || endValue.valueOf() < one
    };

    onChange = (field, value) => {
        this.setState({
            [field]: value
        });
    };

    onStartChange = value => {
        this.onChange("startValue", value);
        this.setState({
            startTime: moment(value).format("YYYY-MM-DD HH:mm:ss")
        });
    };

    onEndChange = value => {
        this.onChange("endValue", value);
        this.setState({
            endTime: moment(value).format("YYYY-MM-DD HH:mm:ss")
        });
    };

    handleStartOpenChange = open => {
        if (!open) {
            this.setState({ endOpen: true });
        }
    };

    handleEndOpenChange = open => {
        this.setState({ endOpen: open });
    };

    render() {
        console.log(this.state.startTime);
        const { startValue, endValue, endOpen } = this.state;
        const menu = (
            <Menu>
                <Menu.Item onClick={this.derive}>本页</Menu.Item>
                <Menu.Item onClick={this.derive}>全部</Menu.Item>
            </Menu>
        );

        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(
                    `selectedRowKeys: ${selectedRowKeys}`,
                    "selectedRows: ",
                    selectedRows
                );
            },
            getCheckboxProps: record => ({
                disabled: record.name === "Disabled User", // Column configuration not to be checked
                name: record.name
            })
        };

        return (
            <div>
                <Card
                    className={style.CardTop}
                    bodyStyle={{ paddingTop: "0.5vh", paddingBottom: "0" }}
                >
                    <div className={style.Top}>
                        关键词:
                        <Input
                            value={this.state.value}
                            placeholder=""
                            className={style.Cascader}
                            onChange={this.InputChange}
                            size="small"
                        />
                        开始时间:
                        <DatePicker
                            disabledDate={this.disabledStartDate}
                            showTime
                            format="YYYY-MM-DD HH:mm:ss"
                            size="small"
                            value={startValue}
                            placeholder="开始时间"
                            onChange={this.onStartChange}
                            onOpenChange={this.handleStartOpenChange}
                            style={{ width: "25vh", marginRight: 10 }}
                        />
                        结束时间:
                        <DatePicker
                            disabledDate={this.disabledEndDate}
                            showTime
                            size="small"
                            format="YYYY-MM-DD HH:mm:ss"
                            value={endValue}
                            placeholder="结束时间"
                            onChange={this.onEndChange}
                            open={endOpen}
                            onOpenChange={this.handleEndOpenChange}
                            style={{ width: "25vh", marginRight: 10 }}
                        />
                        报警等级:
                        <Select
                            style={{ width: 120, marginRight: 20 }}
                            size="small"
                            onChange={this.handleChange}
                            defaultValue={"全部"}
                            value={this.state.rank}
                        >
                            <Option value="普通报警">普通报警</Option>
                            <Option value="重要报警">重要报警</Option>
                            <Option value="">全部</Option>
                        </Select>
                        <Button
                            type="primary"
                            className={style.primary}
                            onClick={this.query}
                        >
                            查询
                        </Button>
                        <Button className={style.reset} onClick={this.reset}>
                            重置
                        </Button>
                    </div>
                </Card>
                <Card
                    className={style.CardBottom}
                    bodyStyle={{ paddingTop: "0.5vh", paddingBottom: "0" }}
                >
                    <Dropdown overlay={menu}>
                        <span>
                            <MyIcon
                                type="icon-webicon320"
                                className={style.MyIcon_webicon320}
                            />
                            导出 <Icon type="down" />
                        </span>
                    </Dropdown>
                    <div className={style.myTable}>
                        <Table
                            style={{ width: this.state.repairWidth }}
                            onChange={this.rowSelection}
                            columns={this.state.columns}
                            dataSource={PublicService.transformArrayData(
                                this.state.dataSource,
                                true,
                                true
                            )}
                            align="center"
                            loading={this.state.tableLoading}
                            className={style.Table}
                            bordered={true}
                            pagination={false}
                            size="small"
                        />
                    </div>
                    <Pagination
                        showQuickJumper
                        showSizeChanger
                        current={this.state.page}
                        onShowSizeChange={this.onShowSizeChange}
                        defaultCurrent={1}
                        total={this.state.rowCount}
                        onChange={this.Pagination}
                        className={style.Pagination}
                        size="small"
                    />
                </Card>
            </div>
        );
    }
}

export default connect()(HistoricalAlarm);
